import React, { Component, createRef } from 'react'


class Header extends Component {
    state = {
        count: 100
    }
    render() {
        return <h1>Header 组件 -- {this.state.count}</h1>
    }
}

function Main() {
    return <h1>Main 组件</h1>
}

export default class App extends Component {

    inpRef = React.createRef()

    headerRef = createRef()

    mainRef = createRef()

    render() {
        return (
            <div>
                {/* 将 ref 添加在一个元素上，可以获取到对应的元素本身 */}
                <input type="text" ref={this.inpRef} />

                {/* 将 ref 添加在一个类组件上的时候，可以获取到对应的组件实例 */}
                <Header ref={this.headerRef} />

                {/* 函数式组件无法直接添加 ref 属性 */}
                <Main ref={this.mainRef} />

                <button onClick={() => {

                    // 将 ref 添加在一个元素上，可以获取到对应的元素本身
                    console.log(this.inpRef.current);

                    // 将 ref 添加在一个类组件上的时候，可以获取到对应的组件实例
                    console.log(this.headerRef.current);
                    // 我们拿到组件实例后，可以对该组件做修改
                    this.headerRef.current.setState({
                        count: 111
                    })

                    // 函数式组件无法直接添加 ref 属性
                    console.log(this.mainRef.current);

                }}>点击获取 ref 值</button>

            </div>
        )
    }
}
